import React, {memo, PureComponent} from 'react';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-sql';
import {format } from 'sql-formatter';
import styles from './index.less';
import {message} from 'antd';
 class DescSql extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  //初始化
 async componentDidMount() {
    Prism.highlightAll();
  }
   componentWillUnmount() {
   }

   sqlFormat = (text ) => {
    if (!text) return '';
    try {
        let a=format(text, {
        expressionWidth: 500,
        paramTypes: {
          custom: [{ regex: String.raw`#\{.+?\}` }],
        },
      });
      return a
    } catch (error) {
      return text
    }
  }

  render() {
    const { content } = this.props;
    const reaL=typeof content==='string'?JSON.parse(content):content
    let formattedSql = this.sqlFormat(reaL?.kpi_desc);
    const handleCopy = async () => {
      // 获取要复制的文本
      let text = reaL?.kpi_desc;
      // 创建一个临时的textarea元素
      let tempTextArea = document.createElement("textarea");
      tempTextArea.value = text;
      document.body.appendChild(tempTextArea);
      // 选中临时textarea中的文本并执行复制操作
      tempTextArea.select();
      document.execCommand("copy");
      message.success('复制成功 !');
      // 移除临时textarea元素
      document.body.removeChild(tempTextArea);
    };
    return (
      <div className={styles.mySql}>
        <pre style={{background: "#FAFAFA"}}>
          <div className={styles.textBtn} onClick={handleCopy}>复制</div>
          <code className="language-sql">
            {formattedSql}
          </code>
        </pre>
      </div>
    )
      ;
  }
 }

export default DescSql
